<template>
    <el-container>
        <el-header>
            <el-button type="primary" size="mini" @click="saveForm('overwrite')">保存</el-button>
            <el-button type="primary" size="mini" @click="saveForm('newVersion')">保存为新版本</el-button>
            <el-button size="mini" @click="preview">预览</el-button>
        </el-header>
        <el-main>
            <div id="form-builder" class="form-builder-container"></div>
        </el-main>
    </el-container>
</template>

<script>
    import FormIoFormBuilder from 'formiojs/FormBuilder';
    import ComponentAll from 'formiojs/components';
    import Components from 'formiojs/components/Components';
    import 'formiojs/dist/formio.full.min.css'
    import {saveFormJsonData, getFormJsonData} from '../../api/form.builder'

    //设置所有的组件
    Components.setComponents(ComponentAll);
    console.log(ComponentAll)
    export default {
        name: "FormBuilder",
        data() {
            return {
                modelId: this.$route.query.modelId,
                builder: null,
                builderReady: null
            }
        },
        methods: {
            saveForm: function (action) {

                let editModelId = this.$store.state.editModelId;

                if (!this.modelId && !editModelId) {
                    this.$message.error("未选择表单")
                    return;
                }

                let params = {
                    lastUpdated: new Date().toISOString(),
                    conflictResolveAction: action,
                    json_xml: localStorage.getItem("form-components")
                };

                saveFormJsonData(params, this.modelId ? this.modelId : editModelId).then((res) => {
                    this.$message.success("保存成功")
                })
            },
            initFormBuilder(options) {

                if (this.builder) {
                    console.log("先销毁之前的实例，防止内存泄露")
                    this.builder.instance.destroy(true);
                }

                let that = this;
                this.builder = new FormIoFormBuilder(document.getElementById('form-builder'), options);
                this.builderReady = this.builder.ready;

                return this.builderReady.then(() => {
                    this.builder.on('saveComponent', function (component) {
                        that.$message.success("添加成功")
                    });

                    this.builder.on('removeComponent', function (component) {
                        that.$message.success("移除成功")
                    });

                    this.builder.on('change', function (form) {
                        localStorage.setItem("form-components", JSON.stringify({
                            components: form.components,
                            display: "form",
                        }));
                    });
                });
            },
            preview() {
                this.$router.push('form-preview');
            }
        },
        mounted: function () {
            let json = this.$store.state.formJsonData;
            if (this.modelId || json) {
                if (this.modelId) {
                    getFormJsonData(this.modelId).then((editJson) => {
                        this.initFormBuilder(editJson.model).catch((error) => {
                        });
                        this.$store.commit('updateFormJsonData', editJson.model)
                    })

                    return;
                }

                if (json) {
                    this.initFormBuilder(json).catch((error) => {
                    });
                }

            } else {
                this.$message.error("请从表单管理选择你要编辑的表单");
            }
        },
        destroyed() {
            if (this.builder) {
                console.log("正在销毁表单构造器")
                this.builder.instance.destroy(true);
            }
        }
    }
</script>

<style scoped>
    .el-header {
        line-height: 60px;
        text-align: right;
    }
</style>
